<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
    <title>JSP - Hello World</title>
    <link rel="stylesheet" href="css/common.css">
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    </style>
</head>
<body>
<h1><%= "Hello World!" %>
</h1>
<h2>使用超链接提交数据(请求行,同步)</h2>
<%--url加上/则代表绝对路径 不加则代表相对路径(相对于当前资源的路径)--%>
<a href="student/add?name=孙浩&englishName=Suhenry&address=河南财经政法大学&phoneNumber=17344700712">showParam</a>
<br/>
<h2>使用表单提交(请求行，同步)</h2>
<form action="/student/useModelAndView" method="post">
    <label>中文名字:
        <input name="name" type="text">
    </label>
    <br>
    <label>英文名字:
        <input name="englishName" type="text">
    </label>
    <br>
    <label>手机号码:
        <input name="phoneNumber" type="text">
    </label>
    <br>
    <label>家庭住址:
        <input name="address" type="text">
    </label>
    <br>

    <label>出生日期:
        <input name="birthday" type="date">
    </label>
    <input type="submit"  value="提交">
</form>
<hr/>
<h2>使用表单更新(请求行，同步)</h2>
<form action="/student/add02" method="post">

    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;旧
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;新
    <br>
    <label>中文名字:
        <input name="laterName" type="text">&nbsp;<input name="newName" type="text">
    </label>
    <br>
    <label>英文名字:
        <input name="laterEnglishName" type="text">&nbsp;<input name="newEnglishName" type="text">
    </label>
    <br>
    <label>手机号码:
        <input name="laterPhoneNumber" type="text">&nbsp;<input name="newPhoneNumber" type="text">
    </label>
    <br>
    <label>家庭住址:
        <input name="laterAddress" type="text">&nbsp;<input name="newAddress" type="text">
    </label>
    <br>

    <label>出生日期:
        <input name="laterBirthday" type="date">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input name="newBirthday" type="date">
    </label><br>
    <input type="submit"  value="提交">
</form>
<h2>使用ajax提交(异步)</h2>
<button onclick="requestHeader()">ajax请求头提交数据</button>
<button onclick="requestBody()">ajax请求体提交数据使用注解</button>
<button onclick="useOurType()">使用SpringMVC能力进行响应</button>
<hr/>
<a href="/thymeleaf/hello">thymeleaf hello</a>
<script>
    function requestHeader() {

        $.ajax(
            {
                url: "student/requestHead",//要提交到的控制器
                type: "post",//请求方式
                headers: {//前端请求头数据
                    name: 'sunhao'
                },
                success: function (res) {
                    console.log(res)
                }

            }
        )
    }

    function requestBody() {
        let data = {};
        data.name = "sunhao";
        data.address = "河南郑州";
        data.phoneNumber = "17344700712";
        $.ajax(
            {
                url: "student/requestBody",
                type: "post",
                contentType: "application/json",
                data: JSON.stringify(data),//前端请求体数据
                success: function (res) {
                    console.log(res)
                }

            }
        )
    }


    function useOurType() {
        let data = {};
        data.name = "sunhao";
        data.address = "河南郑州";
        data.phoneNumber = "17344700712";
        $.ajax(
            {
                url: "student/useOurType",
                type: "post",
                data: data,
                success: function (res) {
                    console.log(res)
                }

            }
        )
    }

</script>
</body>

</html>